<template>
	<PageLayout title="分享电子名片" :show-back="true">
		<!-- 优雅资质风格的名片预览 -->
		<view class="elegant-card">
			<!-- 装饰性边框 -->
			<view class="card-border">
				<!-- 卡片内容 -->
				<view class="card-content">
					<!-- 顶部装饰 -->
					<view class="card-header">
						<image :src="cardInfo.logo" class="company-logo" mode="contain"></image>
						<view class="card-title">个人商务名片</view>
					</view>
					
					<!-- 个人信息区域 -->
					<view class="personal-info">
						<image :src="cardInfo.avatar" class="avatar" mode="cover"></image>
						
						<view class="info-details">
							<view class="name">{{ cardInfo.name }}</view>
							<view class="position">{{ cardInfo.position }}</view>
							<view class="company">{{ cardInfo.company }}</view>
						</view>
					</view>
					
					<!-- 联系信息 -->
					<view class="contact-info">
						<view class="contact-item">
							<text class="icon">📞</text>
							<text class="text">{{ cardInfo.phone }}</text>
						</view>
						<view class="contact-item">
							<text class="icon">✉️</text>
							<text class="text">{{ cardInfo.email }}</text>
						</view>
						<view class="contact-item">
							<text class="icon">📍</text>
							<text class="text">{{ cardInfo.address }}</text>
						</view>
					</view>
					
					<!-- 二维码区域 -->
					<view class="qrcode-section">
						<image :src="cardInfo.qrCode" class="qrcode" mode="cover"></image>
						<view class="qrcode-text">扫码查看完整名片</view>
					</view>
					
					<!-- 底部装饰 -->
					<view class="card-footer">
						<text>© {{ new Date().getFullYear() }} {{ cardInfo.company }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 分享操作区 -->
		<view class="share-actions">
			<button class="share-btn" open-type="share">
				<text>微信好友</text>
			</button>
			<button class="save-btn" @click="saveToAlbum">
				<text>保存图片</text>
			</button>
		</view>
		
		<!-- 隐藏的Canvas用于生成分享图片 -->
		<canvas 
			canvas-id="shareCanvas" 
			class="share-canvas"
			:width="750" 
			:height="1000"
		></canvas>
	</PageLayout>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { useRoute } from '@/plugin/uni-mini-router'
	import { cardStore } from '@/store/card.ts';

	const route = useRoute()
	const cdStore = cardStore()
	
	// 名片数据
	const cardInfo = ref({
		id: '',
		name: '',
		position: '',
		company: '',
		phone: '',
		email: '',
		address: '',
		avatar: '',
		logo: '',
		qrCode: ''
	})
	
	// 分享图片临时路径
	const shareImagePath = ref('')
	
	// 页面加载时获取名片数据
	onMounted(async () => {
		const { cardId } = route.query;
		// 从存储中获取名片数据
		Object.assign(cardInfo.value, cdStore.cardInfo);
		
		// 生成分享图片
		await generateShareImage();
	});
	
	// 生成优雅风格的分享图片
	const generateShareImage = () => {
		return new Promise((resolve) => {
			const ctx = uni.createCanvasContext('shareCanvas');
			const dpr = uni.getSystemInfoSync().pixelRatio || 1;
			ctx.scale(dpr, dpr); // 处理高清显示
			
			// 1. 绘制背景和边框
			// 外层背景
			ctx.setFillStyle('#f8f5f0');
			ctx.fillRect(0, 0, 750/dpr, 1000/dpr);
			
			// 内层白色背景
			const padding = 30;
			ctx.setFillStyle('#ffffff');
			ctx.fillRect(
				padding/dpr, 
				padding/dpr, 
				(750 - padding*2)/dpr, 
				(1000 - padding*2)/dpr
			);
			
			// 金色边框
			ctx.setStrokeStyle('#d4af37');
			ctx.setLineWidth(2/dpr);
			ctx.strokeRect(
				(padding + 20)/dpr, 
				(padding + 20)/dpr, 
				(750 - (padding + 20)*2)/dpr, 
				(1000 - (padding + 20)*2)/dpr
			);
			
			// 2. 绘制公司logo和标题
			// 公司logo
			ctx.drawImage(
				cardInfo.value.logo || '/static/images/default-logo.png',
				(750/2 - 50)/dpr,
				(padding + 40)/dpr,
				100/dpr,
				100/dpr
			);
			
			// 标题
			ctx.setFontSize(30/dpr);
			ctx.setFillStyle('#8b6e4e');
			ctx.setTextAlign('center');
			ctx.fillText('个人商务名片', 750/2/dpr, (padding + 180)/dpr);
			
			// 3. 绘制个人信息
			// 头像
			ctx.save();
			ctx.beginPath();
			ctx.arc(180/dpr, 280/dpr, 60/dpr, 0, 2 * Math.PI);
			ctx.clip();
			ctx.drawImage(
				cardInfo.value.avatar || '/static/images/default-avatar.png',
				120/dpr,
				220/dpr,
				120/dpr,
				120/dpr
			);
			ctx.restore();
			
			// 姓名
			ctx.setFontSize(36/dpr);
			ctx.setFillStyle('#333333');
			ctx.setTextAlign('left');
			ctx.fillText(cardInfo.value.name, 280/dpr, 260/dpr);
			
			// 职位
			ctx.setFontSize(26/dpr);
			ctx.setFillStyle('#666666');
			ctx.fillText(cardInfo.value.position, 280/dpr, 300/dpr);
			
			// 公司
			ctx.setFontSize(24/dpr);
			ctx.setFillStyle('#888888');
			ctx.fillText(cardInfo.value.company, 280/dpr, 330/dpr);
			
			// 分隔线
			ctx.setStrokeStyle('#e8e0d5');
			ctx.setLineWidth(1/dpr);
			ctx.beginPath();
			ctx.moveTo(100/dpr, 380/dpr);
			ctx.lineTo(650/dpr, 380/dpr);
			ctx.stroke();
			
			// 4. 绘制联系信息
			const contactY = 430;
			const contactItems = [
				{ icon: '📞', text: cardInfo.value.phone || '未填写' },
				{ icon: '✉️', text: cardInfo.value.email || '未填写' },
				{ icon: '📍', text: cardInfo.value.address || '未填写' }
			];
			
			contactItems.forEach((item, index) => {
				ctx.setFontSize(24/dpr);
				ctx.setFillStyle('#555555');
				ctx.fillText(
					item.icon + '  ' + item.text,
					120/dpr,
					(contactY + index * 50)/dpr
				);
			});
			
			// 5. 绘制二维码
			ctx.drawImage(
				cardInfo.value.qrCode || '/static/images/default-qrcode.png',
				(750/2 - 80)/dpr,
				(contactY + 150)/dpr,
				160/dpr,
				160/dpr
			);
			
			// 二维码文字
			ctx.setFontSize(20/dpr);
			ctx.setFillStyle('#888888');
			ctx.setTextAlign('center');
			ctx.fillText(
				'扫码查看完整名片', 
				750/2/dpr, 
				(contactY + 150 + 190)/dpr
			);
			
			// 6. 绘制底部信息
			ctx.setFontSize(18/dpr);
			ctx.setFillStyle('#b8a57e');
			ctx.fillText(
				'© ' + new Date().getFullYear() + ' ' + cardInfo.value.company, 
				750/2/dpr, 
				(1000 - padding - 20)/dpr
			);
			
			// 绘制完成
			ctx.draw(false, () => {
				// 将canvas转换为图片
				uni.canvasToTempFilePath({
					canvasId: 'shareCanvas',
					success: (res) => {
						shareImagePath.value = res.tempFilePath;
						resolve(true);
					},
					fail: (err) => {
						console.error('生成分享图片失败:', err);
						resolve(false);
					}
				});
			});
		});
	};
	
	// 保存图片到相册
	const saveToAlbum = () => {
		if (!shareImagePath.value) {
			uni.showToast({ title: '图片生成中，请稍候', icon: 'none' });
			return;
		}
		
		uni.saveImageToPhotosAlbum({
			filePath: shareImagePath.value,
			success: () => {
				uni.showToast({ title: '保存成功', icon: 'success' });
			},
			fail: (err) => {
				console.error('保存图片失败:', err);
				uni.showToast({ title: '保存失败，请重试', icon: 'none' });
			}
		});
	};
	
	// 配置微信分享内容
	const onShareAppMessage = () => {
		return {
			title: `${cardInfo.value.name}的商务名片`,
			path: `/pages/card/cardDetail?cardId=${cardInfo.value.id}`,
			imageUrl: shareImagePath.value || '/static/images/share-default.png',
			desc: `${cardInfo.value.position} | ${cardInfo.value.company}`
		};
	};
</script>

<style scoped>
	.elegant-card {
		padding: 30rpx;
		display: flex;
		justify-content: center;
	}

	.card-border {
		width: 90%;
		background-color: #f8f5f0;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.card-content {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
		border: 1rpx solid #e8e0d5;
		position: relative;
	}

	/* 顶部样式 */
	.card-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 50rpx;
	}

	.company-logo {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}

	.card-title {
		font-size: 32rpx;
		color: #8b6e4e;
		font-weight: 500;
	}

	/* 个人信息 */
	.personal-info {
		display: flex;
		align-items: center;
		margin-bottom: 60rpx;
		padding: 0 20rpx;
	}

	.avatar {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		border: 4rpx solid #f0e8d9;
	}

	.info-details {
		margin-left: 40rpx;
	}

	.name {
		font-size: 38rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 8rpx;
	}

	.position {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 5rpx;
	}

	.company {
		font-size: 24rpx;
		color: #888888;
	}

	/* 联系信息 */
	.contact-info {
		margin-bottom: 60rpx;
		padding: 0 40rpx;
	}

	.contact-item {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}

	.contact-item .icon {
		font-size: 28rpx;
		margin-right: 15rpx;
		color: #a68c6c;
	}

	.contact-item .text {
		font-size: 26rpx;
		color: #555555;
	}

	/* 二维码区域 */
	.qrcode-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}

	.qrcode {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 15rpx;
	}

	.qrcode-text {
		font-size: 22rpx;
		color: #888888;
	}

	/* 底部信息 */
	.card-footer {
		text-align: center;
		font-size: 20rpx;
		color: #b8a57e;
		padding-top: 20rpx;
		border-top: 1rpx dashed #e8e0d5;
	}

	/* 分享操作区 */
	.share-actions {
		display: flex;
		gap: 30rpx;
		padding: 0 40rpx 60rpx;
	}

	.share-btn, .save-btn {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		font-size: 30rpx;
	}

	.share-btn {
		background-color: #d4af37;
		color: #ffffff;
	}

	.save-btn {
		background-color: #f0e8d9;
		color: #8b6e4e;
	}

	/* 隐藏的canvas */
	.share-canvas {
		position: fixed;
		top: -10000rpx;
		left: -10000rpx;
		width: 750rpx;
		height: 1000rpx;
	}
</style>
